Interface And Application Programming 


Objectives
Individual Assignment

1)Write an application that interfaces a user with an  input &/or output device that you made.

Group Assignment

1)Compare as many tool options as possible.

U.Interfacing Final Project

For this week I decided to interface my final project application and have a integration with google assistant using Firebase,MIT app inverter,Google Sheets and IFTT's.So I used Firebase as a common place to tiger and Real time data storage. and update this using app inverter ,sheets and Google Assistant.and ESP32 always check the  Realtime data is updated or not 

Mobirise

Data Flow diagram

FireBase

Firebase is a platform developed by Google for creating mobile and web applications.Firebase has three core services: a real-time database, user authentication and hosting.I use the real-time data base.

Mobirise


Select the Add project option to create a new project. You will be asked to Enter your project name, give the project a suitable name.

Mobirise


To get started head over to Firebase, and sign in using your Google account.

Mobirise


In the database creation menu you can choose a location that is closest to you, and select Next. 

Mobirise


Next we need to create a database which will hold all our  data. To do this, select the Realtime Database menu option on the top left, and you’ll be taken to the Realtime Database page. Select the Create Database button

Mobirise


Lastly you should see a new page with your new empty database, and we are all set!

Mobirise


You will be presented with the option to initialise your database in locked mode or test mode. Select test mode for now. The main difference is that in test mode a database access rule is placed allowing unauthorised access to your database for thirty days.

Mobirise


The second item we need to store is the project’s API key. To get you API key navigation to the project settings page by selecting the settings icon on the top right, and then selecting the Project settings menu.

Mobirise


Before, continue there are two items you need to copy and store for future use in our embedded application. The first item we need is our Realtime Database URL, which you can find by copying the URL of the Realtime Database page

Mobirise


You can create variables inside the real-time database.As triggering functions or just user input.

Mobirise


Now click on Service accounts and then Database secrets.On clicking on Database Secrets you will find a secret key, copy this key and save it in notepad, this is your firebase authorization key which you will need later.

Mobirise

TIP##
You can update the rules from 30 days test to read and write to true . so that you can use for longer time.

Setting up ESP32 module with Firebase

To work with ESP32 using Google firebase you will need a firebase library so firstly download that library using below link and save it in Arduino library files.

After installing the library you are ready to work with Google firebase using ESP32.

Add Firebase library and define database link and authentication data.

#include <FirebaseESP32.h >

#define FIREBASE_HOST "Real time Database link which  copied"
#define FIREBASE_AUTH "add Authentication key"


FirebaseData firebaseData;


This will call for authentication and get variable in the 'variable Name'
and store it as string.// i used sting since text box inputs from app is sring.

Firebase.begin(FIREBASE_HOST, FIREBASE_AUTH);
Firebase.reconnectWiFi(true);

if (Firebase.getString(firebaseData, "Variable Name"))
{

String i = (firebaseData.stringData());


For updating posting geting creating .databases  and expand in Firebase Refer lib Finctions.https://github.com/mobizt/Firebase-ESP32


MiT App Inventer

MIT App Inventor is a web application integrated development environment originally provided by google, and now maintained by the "Massachusetts Institute of Technology (MIT)".This software will provide an easy interfacing for beginners. It is free and open-source software.

https://appinventor.mit.edu/

Its just drag and drop items, you can add text box ,buttons.specify the size ,color images and all to look good. 

Mobirise

MiT Interface (Designer)

Mobirise

These are the components, buttons to tiger, text box to get data (token) from user and  for config.  the authentication and bucket URL.

Mobirise

Blocks Section.

On the other hand the block editor is the different environment in which we can visually can arrange the different color-coded blocks to place the logic of the app. We set the logic of app by arranging these color-blocks in the way we can solve the puzzle pieces.

Logic is: when user click a button, authentication is done and update the variable with a value or the value in the text box.

Mobirise

You can test the app in companion app or download the .apk file from Build and yeeaa its working the data gets updated in Firebase. 

Google Assistant, Cloud Functions(Firebase) and Dialog Flow

Cloud Functions for Firebase is a serverless framework that lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests. Your JavaScript or TypeScript code is stored in Google's cloud and runs in a managed environment. There's no need to manage and scale your own servers.Dialogflow’s inline webhook editor is deployed on Firebase Cloud Functions.

Follow this tutorial to build an agent and train your google assistant.

https://cloud.google.com/dialogflow/es/docs/tutorials/build-an-agent/create-customize-agent.

\You can trier the function in Firebase to do some specific tasks in fire base witch include adding variables updating deleting etc.so you have to write the function in .js.
 you can also visit to know more about Firebase functions:-
https://firebase.google.com/docs/functions

Mobirise


For the fulfillment or the function to be called can be done in both ways configure web hook or use inline editor.

Firebase CLI

The Firebase CLI (GitHub) provides a variety of tools for managing, viewing, and deploying to Firebase projects.
To download and run the binary for the Firebase CLI, follow these steps:
2.Access the binary to open a shell where you can run the firebase command.

Its like Git, it can update the cloud function locally the term used instead of push is Deploy. 

Mobirise


Select the project.

Mobirise


Open CLI binary for windows.Login to account.

Mobirise




when selecting for project they will ask for functions files in local repo.

Mobirise



npm install -g firebase-tools
it will update the tools  and lib. of firebase

Mobirise




You can edit the function (index.js)

Mobirise


Local clone is created 

Mobirise



firebase  deploy
it will push the function to Firebase and it willl be triggered as google assist. teachings as we done in Dilogflow.

IFTTT's

https://ifttt.com/home.
If This Then That is a service that allows a user to program a response to events in the world. IFTTT has partnerships with different service providers that supply event notifications to IFTTT and execute commands that implement the responses. Some event and command interfaces are simply public APIs.
Logic : If google asst triggered with a specif word and with number a web hook is executed and data updated in Firebase.

Mobirise


Each block is called applets, you can create one by login IFTTT

Mobirise

Trigger action in google assistant. which gets the text in the
place of ' $ and we can also set response.

Mobirise

URL: you can get this url from the Firebase witch represent the value in Firebase.this will update the value of variable to text field.I added inverted comma and back slashes since Mit app inventor text box data sent in same format so no crashes.

Mobirise
Mobirise


The Whole interfacing of final project DONE.HAPPY ME.


You can also try out google sheets and app scripts for data  and cloud functions.
link.



Download design Files.Click here.


Copyright © 2021 Abel's FAB Student agreement .All rights reserved

Its just drag and drop items, you can add text box ,buttons.specify the size ,color images and all to look good. 

https://mobirise.com simple site maker